<template>
  <view class="wrapper">
    <!-- 收货信息 -->
    <view class="shipment">
      <!-- 1. 有数据：显示选择的地址 -->
      <block v-if="addressInfo">
        <view class="dt">收货人:</view>
        <view class="dd meta">
          <text class="name">{{ addressInfo.userName }}</text>
          <text class="phone">{{ addressInfo.telNumber }}</text>
        </view>
        <view class="dt">收货地址:</view>
        <view class="dd">{{ address }}</view>
      </block>
      <!-- 2. 没有数据：显示按钮 -->
      <button @click="selAddress" v-else type="primary">选择收货地址</button>
    </view>
    <!-- 购物车 -->
    <view class="carts">
      <view class="item">
        <!-- 店铺名称 -->
        <view class="shopname">优购生活馆</view>
        <!-- 购物车列表数据 -->
        <uni-swipe-action>
          <uni-swipe-action-item
            v-for="(good, i) in carts"
            :key="good.goods_id"
            :right-options="options"
            @click="onClick(good, $event)"
          >
            <!-- 这里放可以左右滑动的结构 -->
            <view class="goods">
              <!-- 商品图片 -->
              <image class="pic" :src="good.goods_small_logo" />
              <!-- 商品信息 -->
              <view class="meta">
                <view class="name">{{ good.goods_name }}</view>
                <view class="price">
                  <text>￥</text>{{ good.goods_price }}
                  <text>.00</text>
                </view>
                <!-- 加减 -->
                <view class="amount">
                  <text class="reduce" @click="changeCount(i, -1)">-</text>
                  <!-- 商品数量 -->
                  <input
                    type="number"
                    disabled
                    :value="good.goods_count"
                    class="number"
                  />
                  <text class="plus" @click="changeCount(i, 1)">+</text>
                </view>
              </view>
              <!-- 单选框 -->
              <view class="checkbox" @click="singleCheck(i)">
                <icon
                  type="success"
                  size="20"
                  :color="good.goods_checked ? '#ea4451' : '#ddd'"
                ></icon>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>
    <!-- 其它 -->
    <view class="extra">
      <!-- 全选框 -->
      <label class="checkall" @click="seledAll">
        <icon
          type="success"
          :color="isAll ? '#ea4451' : '#ccc'"
          size="20"
        ></icon
        >全选
      </label>
      <view class="total">
        合计:
        <text>￥</text>
        <label>{{ seledTotal }}</label>
        <text>.00</text>
      </view>
      <view @click="createOrder" class="pay"
        >结算({{ seledCarts.length }})</view
      >
    </view>
  </view>
</template>

<script>
import { CART_KEY } from '@/utils/const.js'
export default {
  data () {
    return {
      // 购物车列表数据
      carts: [],
      // 滑动显示按钮的配置
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        },
        {
          text: '确定',
          style: {
            backgroundColor: '#333'
          }
        }
      ],
      // 微信用户的地址数据
      addressInfo: null
    }
  },
  // 注意：onLoad只会在小程序页面第一次创建的时候执行1次
  // onLoad () {
  //   // 页面加载从本地获取购物车数据
  //   this.carts = uni.getStorageSync(CART_KEY) || []
  // },
  onShow () {
    this.getCarts()
  },
  computed: {
    address () {
      if (this.addressInfo) {
        // 有数据执行
        const { provinceName, cityName, countyName, detailInfo } = this.addressInfo
        return provinceName + cityName + countyName + detailInfo
      }
    },
    // 全选框是否选中：true 选中（所有商品都选中） ｜ false 未选中 => 跟购物车中所有商品选中状态有关
    isAll () {
      // 选中商品的数量 === 购物车商品列表长度
      return this.seledCarts.length === this.carts.length
    },
    // 选中的商品列表
    seledCarts () {
      return this.carts.filter(item => item.goods_checked === true)
    },
    // 选中商品的总价
    seledTotal () {
      return this.seledCarts.reduce((acc, good) => acc += good.goods_count * good.goods_price, 0)
    }
  },
  /**
   * 监听属性和计算属性区别：
   * 1. 计算属性 =》 当作变量使用,依赖一个或多个data变量
   * 2. 监听属性 =》 当作函数逻辑执行（实现一些功能）
   */
  watch: {
    carts: {
      deep: true, // 开启深度监听
      handler (newValue) {
        console.log('购物车数据变化了：', newValue)
        uni.setStorageSync(CART_KEY, newValue)
      }
    }
  },
  methods: {
    // 结算：创建订单
    async createOrder () {
      /**
       * 1. 校验：有收获地址、至少选中一件商品、登录
       * 2. 满足：
       *        1. 调用后台接口创建订单
       *        2. 订单创建成功后，== 之前选中的商品需要从购物车删除 ==
       *        3. 跳转订单列表也
       */
      if (!this.addressInfo) return uni.showToast({ title: '请选择收货地址', icon: 'none' })
      if (!this.seledCarts.length) return uni.showToast({ title: '请至少选择一件商品下单', icon: 'none' })
      if (!uni.getStorageSync('ugo-token')) return uni.navigateTo({
        url: '/packone/auth/index'
      })
      console.log('创建订单...')
      const goods = this.seledCarts.map(({ goods_id, goods_price, goods_count }) => {
        return {
          goods_id,
          goods_price,
          goods_number: goods_count
        }
      })
      console.log('后台需要的选中商品的列表：', goods)
      const { msg } = await this.request({
        url: '/api/public/v1/my/orders/create',
        method: 'post',
        data: {
          order_price: this.seledTotal, // 选中商品的总价
          consignee_addr: this.address, // 完整的收获地址
          goods // 后台需要的选中商品的列表
        }
      })
      if (msg.status === 200) {
        // 订单创建成功
        // 之前选中的商品需要从购物车删除？反向思考=》== 留下的是未选中 ==
        this.carts = this.carts.filter(item => item.goods_checked === false)
        uni.navigateTo({
          url: '/packone/order/index'
        })
      } else {
        // 订单创建失败
        uni.showToast({
          title: msg.msg,
          icon: 'none'
        })
      }
    },
    // 选择收货地址
    async selAddress () {
      const res = await uni.chooseAddress();
      console.log('地址数据：', res)
      this.addressInfo = res
    },
    /**
     * good 当前删除商品
     * e 事件对象
     */
    onClick (good, e) {
      console.log('点击了：', good, e)
      if (e.index === 0) {
        // 点了删除按钮
        uni.showModal({
          title: '确认',
          content: '亲，确认删除吗？',
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定');
              this.carts = this.carts.filter(item => item.goods_id !== good.goods_id)
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }

    },
    // 全选:取反
    seledAll () {
      if (this.isAll) {
        // 全选框之前是选中的=》购物车中所有商品是选中的
        // isAll是计算属性变量不能直接修改=》购物车中所有商品修改为未选中
        this.carts.forEach(item => {
          item.goods_checked = false
        })
      } else {
        // 全选框之前是未选中的
        this.carts.forEach(item => {
          item.goods_checked = true
        })
      }
    },
    // 单选
    singleCheck (i) {
      // 取反：1. 之前没有选中，变为选中  2. 之前已经选中，变为未选中
      this.carts[i].goods_checked = !this.carts[i].goods_checked
      // 本地持久化
      // uni.setStorageSync(CART_KEY, this.carts)
    },
    // 根据索引值修改某个商品的数量
    /**
     * index 索引值
     * step => -1 代表减1 ｜ 1 代表加1
     */
    changeCount (index, step) {
      /**
       * 1. 控制范围：商品数量=》1 <= 商品数量 <= 库存
       * 2. 在范围内的话执行：加一或减一操作
       */
      // 获取当前点击商品的数量
      const count = this.carts[index].goods_count
      if (step === -1 && count <= 1) {
        return uni.showToast({
          title: '商品数量最小为1！',
          icon: 'none'
        });
      }
      if (step === 1 && count >= 10) {
        return uni.showToast({
          title: '超过最大可购买库存！',
          icon: 'none'
        });
      }

      // 执行加一或减一操作
      this.carts[index].goods_count += step
      // 本地持久化
      // uni.setStorageSync(CART_KEY, this.carts)

    },
    getCarts () {
      // 页面加载从本地获取购物车数据
      this.carts = uni.getStorageSync(CART_KEY) || []
    }
  },
};
</script>

<style scoped lang="scss">
.shipment {
  height: 100rpx;
  line-height: 2;
  padding: 30rpx 30rpx 40rpx 30rpx;
  font-size: 27rpx;
  color: #333;
  background-color: #fff;
  background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;

  .dt {
    width: 140rpx;
    float: left;
    clear: both;
  }

  .dd {
    padding-left: 160rpx;
  }

  .meta {
    padding-right: 50rpx;
  }

  text.phone {
    float: right;
  }
}

.carts {
  background-color: #f4f4f4;
  padding-bottom: 110rpx;
  overflow: hidden;

  .shopname {
    padding: 30rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #333;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
  }

  .goods {
    display: flex;
    padding: 30rpx 20rpx 30rpx 0;
    margin-left: 100rpx;
    border-bottom: 1rpx solid #eee;
    background-color: #fff;

    position: relative;

    .checkbox {
      width: 101rpx;
      height: 100%;
      background-color: #fff;

      display: flex;
      justify-content: center;
      align-items: center;

      position: absolute;
      left: -100rpx;
      top: 0;
    }

    &:last-child {
      border-bottom: none;
    }

    .pic {
      width: 200rpx;
      height: 200rpx;
      margin-right: 30rpx;
    }

    .meta {
      flex: 1;
      font-size: 27rpx;
      color: #333;
      position: relative;
    }

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      position: absolute;
      bottom: 0;

      color: #ea4451;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .amount {
      position: absolute;
      bottom: 0;
      right: 20rpx;

      height: 48rpx;
      text-align: center;
      border: 1rpx solid #ddd;
      border-radius: 8rpx;

      display: flex;
      align-items: center;

      text {
        display: block;
        width: 60rpx;
        line-height: 48rpx;
        font-size: 36rpx;
        color: #ddd;
        text-align: center;
      }

      input {
        width: 60rpx;
        height: 48rpx;
        min-height: 48rpx;
        font-size: 27rpx;
        border-left: 1rpx solid #ddd;
        border-right: 1rpx solid #ddd;
      }
    }
  }
}

.extra {
  position: fixed;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 50px;
  /* #endif */
  left: 0;
  z-index: 9;

  width: 750rpx;
  height: 96rpx;
  text-align: center;
  line-height: 96rpx;
  font-size: 36rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  color: #333;
  display: flex;

  .checkall {
    width: 140rpx;
    line-height: 1;
    margin-left: 25rpx;
    display: flex;
    align-items: center;

    icon {
      margin-right: 20rpx;
    }
  }

  .total {
    display: flex;
    justify-content: center;
    flex: 1;

    label,
    text {
      color: #ea4451;
      vertical-align: bottom;
      position: relative;
      bottom: -2rpx;
    }

    text {
      position: relative;
      bottom: -3rpx;
      font-size: 24rpx;

      &:first-child {
        margin-left: 10rpx;
      }
    }
  }

  .pay {
    width: 200rpx;
    background-color: #ea4451;
    color: #fff;
  }
}
</style>

